<template>
<keep-alive>
  <el-card>
    <el-row class="data">
      <todaydisplay></todaydisplay>
    </el-row>
    <el-row :gutter="50" justify="space-between" type="flex" class="welcomeinfo">
      <el-col :span='12' class="comments">
        <newcomments class="newcomment"></newcomments>
      </el-col>
      <el-col :span='12' class="calender">
        <!-- <h2 class="calendertitle">{{`${month[cmon]}月演出日历`}}</h2> -->
        <mycalender class="echart"></mycalender>
      </el-col>
    </el-row>
  </el-card>
</keep-alive>
</template>

<script>
import mycalender from './calender'
import newcomments from './newcomments'
import todaydisplay from './todaydisplay'
export default {
  name: 'welcome',
  data () {
    return {
      value: new Date(),
      // 当前月
      cmon: 0,
      // 月份大写
      month: ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十', '十一', '十二']
    }
  },
  components: { mycalender, newcomments, todaydisplay },
  created () {
    this.cmon = this.value.getMonth()
  }
}
</script>

<style lang='stylus' scoped>
.el-card
  .data
    height calc(100% -540px - 40px)
  .welcomeinfo
    height 540px
    width 100%
    margin 0
    padding-top 10px
    .comment
      height 100%
    .calender
      height 100%
      .calendertitle
        font-size 24px
        font-weight 700px
        padding-bottom 16px
      .echart
        height 100%
</style>
